<template>
    <div class="history">
      <div class="chart" ref="chart">
       
          
         
    </div>
       

     </div>
   </template>
   <script>
   export default {
     mounted() {
       this.$ipcRenderer.on_RamanDataResultsHistory_reply(
         (RamanDataResultsHistory) => {
           this.$nextTick().then((data) => {
                let Data = RamanDataResultsHistory.map((item) => {
            // console.log(this.transTimestamp(item["time"]));
             return {
               ...item,
               time: this.transTimestamp(item["time"], "-"),
             };
           });
           let list = Data.sort((a,b)=>{
                        //return b.id - a.id
                       return a.id - b.id
                    });
             this.drawChart(list);
           });
         }
       );
   
     },
     data() {
       return {
         visible: false,
         title: "",
         myChart:null, chartBox:null
         
       };
     },
     methods: {
   
      resizeChart(){
  if(this.myChart == null) return;
  this.$nextTick(_ => {
    this.myChart.resize({
          // 根据父容器的大小设置大小
          width: this.$refs.chart.clientWidth,
          height: this.$refs.chart.clientHeight,
        });
  })
},
   
   
       drawChart(Data) {
         let option = {
           xAxis: {
             //   name: "nm",
             data: Data.map((item) => item["time"]),
             maxInterval: 500,
           }, backgroundColor:"#fff",
           tooltip: {
             trigger: "axis",
            valueFormatter: (value) => Number(value).toFixed(2) + "ppm",
             textStyle: {
               align: "left",
             },
           },
           legend: {
             data: ["配体浓度"],
           },
           grid: {
             left: "6%",
             right: "3%",
             top: "8%",
             bottom: "20%",
           },
   
           dataZoom: [
             {
               type: "slider", //inside平移 缩放
               // throttle: '50', //设置触发视图刷新的频率。单位为毫秒（ms）。
               minValueSpan: 6, //用于限制窗口大小的最小值,在类目轴上可以设置为 5 表示 5 个类目
               start: 0, //数据窗口范围的起始百分比 范围是：0 ~ 100。表示 0% ~ 100%。
               end: 100, //数据窗口范围的结束百分比。范围是：0 ~ 100。
               zoomLock: true, //如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
               textStyle: { color: "rgba(0,0,0,0)" },
             },
           ],
           yAxis: {
             type: "value",
             name:"ppm",
             axisLabel:{
   //    formatter: function (value, index) {
   //     return Number(value);
   // }
             }
           },
           series: [
             {
               name: "配体浓度",
               symbol: "none",
               data: Data.map((item) =>
                 Number(item.c_SWJLpt)
               ),
               type: "line",
               smooth: true,
             },
           ],
         };
   
     if (this.myChart == null) {    
           this.myChart = this.$echarts.init(this.$refs.chart);
           this.myChart.setOption(option);
               let that = this;
           // 当滑动条变化时触发
           this.myChart.on("datazoom",  (params) => {
            this.$emit('stopRefresh');
            
           });
           return;
         }
   
         this.myChart.setOption(option, true); //true重绘
         // this.myChart = this.$echarts.init(this.$refs.chart);
         // this.myChart.setOption(option);
         // return;
       },
   
           transTimestamp(datetime, dateSeprator = "/", timeSeprator = ":") {
         if (datetime) {
           const date = new Date(datetime);
           const year = `${date.getUTCFullYear()}`;
           let month = `${date.getUTCMonth() + 1}`;
           let day = `${date.getUTCDate()}`;
           let hour = `${date.getUTCHours()}`;
           let minute = `${date.getUTCMinutes()}`;
           let second = `${date.getUTCSeconds()}`;
           if (month.length === 1) {
             month = `0${month}`;
           }
           if (day.length === 1) {
             day = `0${day}`;
           }
           if (day.length === 1) {
             day = `0${day}`;
           }
           if (hour.length === 1) {
             hour = `0${hour}`;
           }
           if (minute.length === 1) {
             minute = `0${minute}`;
           }
           if (second.length === 1) {
             second = `0${second}`;
           }
           return `${year}${dateSeprator}${month}${dateSeprator}${day} ${hour}${timeSeprator}${minute}${timeSeprator}${second}`;
         }
       },
     },
   };
   </script>
   
   <style lang="less" scoped>
   .history{
     height: 100%;
     width: 100%;

   }

   .chart {
    height: 100%;
    width: 100%;
     background-color: #fff;
   }
   </style>
   